/*
 * 设备账号修改
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-08 15:21:08
 */
<template>
	<div class="v-customer-device-account-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:label-width="labelWidth()"
			name="edit__form">

			<Form-item
				:label="$t('device.account')"
				prop="account">
				<i-input
					v-model="formValidate.account"
					:placeholder="$t('device.please_enter_account')"
					name="create__account"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('device.password')"
				prop="password">
				<i-input
					v-if="!show_password"
					v-model="formValidate.password"
					:placeholder="$t('device.please_enter_password')"
					name="create__password"
					type="password"
					icon="eye"
					@on-click="showPassword()"/>
				<i-input
					v-else
					v-model="formValidate.password"
					:placeholder="$t('device.please_enter_password')"
					name="create__password"
					type="text"
					icon="eye"
					@on-click="showPassword()"/>
			</Form-item>

			<Form-item
				:label="$t('device.store')"
				prop="store_id">
				<Select
					v-model="formValidate.store_id"
					clearable
					filterable
					name="create__store_id"
					transfer>
					<Option
						v-for="( store , index ) in stores"
						:value="String(Number(store.id))"
						:key="index">{{ store.name }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label="$t('device.device_name')"
				prop="device_name">
				<i-input
					v-model="formValidate.device_name"
					:placeholder="$t('device.please_enter_device_name')"
					name="create__device_name"
					type="text"/>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					name="create__submit"
					@click="updateAccount">
					{{ $t('common.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>
import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {
	name: 'DeviceAccountEdit',
	mixins: [labelWidthMixin],
	props: {
		deviceAccountDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		stores: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			formValidate: {
				account: '',	// 账号
				password: '',	// 密码
				store_id: '',	// 所属店铺
				device_name: '',	// 设备名称
			}, // 更新账号时的表单

			show_password: false,

		};
	},
	watch: {
		deviceAccountDetail() {
			if (this.deviceAccountDetail) {
				this.formValidate.account = this.deviceAccountDetail.account;

				this.formValidate.store_id = String(Number(this.deviceAccountDetail.store_id));

				this.formValidate.device_name = this.deviceAccountDetail.device_name;
			}
		},
	},
	methods: {

		/**
         * 更新设备账号
         * @return {undefined}
         */
		updateAccount() {
			const param = {
				_method: 'PUT',

				account: this.formValidate.account,
				store_id: this.formValidate.store_id,
				password: this.formValidate.password,
				device_name: this.formValidate.device_name,
			};

			this.$emit('update', this.deviceAccountDetail.id, param);

			this.show_password = false;
		},


		/**
         * 设备账号密码显示与隐藏
         * @return {undefined}
         */
		showPassword() {
			this.show_password = !this.show_password;
		},

	},
};
</script>
